<template>
    <table-layout :haveSider="false" :isStandTable="false">
      <template #headCustom>
        <a-button type="primary" @click="onBack">返回</a-button>
        <a-button type="primary" style="marginLeft:20px" @click="onSure">提交</a-button>
        <!-- <a-button type="primary" style="marginLeft:20px" @click="onReset">重置</a-button> -->
      </template>
      <template #form>
        <div class="card">
          <div class="viewTitle">
            {{btn[0].name}}
            <a-button
              type="link"
              class="upAndDown"
              @click="upAndDown($event,0)"
            >
              <a-icon
                v-if="btn[0].isUp"
                type="up"
              />
              <a-icon
                v-else
                type="down"
              />
            </a-button>
          </div>
          <step1 
            ref="orderInfo"  
            v-if="isExit" 
            v-show="btn[0].isUp" 
            @validStep1="validStep1" 
            @nextStep="nextStep" 
            @changeSuplier="changeSuplier" ></step1>
        </div>
        <div class="dis"></div>
        <div class="card">
          <div class="viewTitle">
            {{btn[1].name}}
            <a-button
              type="link"
              class="upAndDown"
              @click="upAndDown($event,1)"
            >
              <a-icon
                v-if="btn[1].isUp"
                type="up"
              />
              <a-icon
                v-else
                type="down"
              />
            </a-button>
          </div>
          <step2  
            ref="orderDetail"  
            v-if="isExit" 
            v-show="btn[1].isUp" 
            @validStep2="validStep2" 
            @onSubmit="onSubmit" 
            @onSubmitError="onSubmitError" 
            :orderData="orderData"
            :supplierOrgPid="supplierOrgPid"></step2>
        </div>
      </template>
    </table-layout>
</template>

<script>
import tableLayout from '@/views/app/biz/common/index'
import step1 from './step1.vue'
import step2 from './step2.vue'
import {deleteInfo,saveInfo } from './purchaseOrder'

export default {
  components: {
    tableLayout,
    step1,
    step2,
  },
  data() {
    return {
      btn: [
        { name: '采购单信息', isUp: true },
        { name: '采购单明细', isUp: true },
      ],
      isExit:true,
      loading: false,
      current: 0,
      orderData:{},
      orgModalTitle:'',
      step1Val:null,
      supplierOrgPid:null,
      
      

    }
  },
  computed: {},
  mounted() {
  },
  activated(){
    console.log('activated',this.$route,this.$route.params.goodsId );
    this.backPathName = this.$route.params.pathName ? this.$route.params.pathName : 'purchaseOrderManage'
    //如果传了type值表示为重新点击进去的，需要初始化数据，如果未传值表示缓存在页签中，需路由配置keepAlive
    if (this.$route.params.type=='edit') {
        this.editModal(this.$route.params.pid)
    }
    if(this.$route.params.type=='add'){
        this.addModal()
    }
  },
  methods: {
    upAndDown (e, num) {
      if (this.btn[num].isUp) {
        this.btn[num].isUp = false
      } else {
        this.btn[num].isUp = true
      }
    },
    onBack() {
      this.$router.push({
        name: this.backPathName,
        params: {
          isJump: false,
          pathName: this.$route.name,
          iscloseMul:true,
        }
      })
    },
    initData(){
      console.log('重置数据');
      Object.assign(this.$data,this.$options.data.call(this))
      this.isExit=false
      setTimeout(()=>{
        this.isExit=true
      },1)
    },
    // 新增按钮 点击了新增
    addModal() {
      this.initData()
    },
    // 点击了编辑
    editModal() {
      this.initData()
    },
    changeSuplier(val){
      console.log(val);
      this.supplierOrgPid=val?val:null
    },
    onSure(){
      //调用step1的提交函数
      this.$refs.orderInfo.nexts()
    },
    //验证获取step1返回值
    validStep1(step1Val){
      console.log(step1Val);
      this.step1Val=step1Val
      //调用step2的提交函数
      this.$refs.orderDetail.nexts()
    },
    //在step2监听能否提交
    validStep2(){
      //提交step1
      this.$refs.orderInfo.saveObjInfo(this.step1Val)
    },
    nextStep(resVal){
      console.log(resVal);
      this.orderData=resVal
      //提交step2
      this.$refs.orderDetail.saveObjInfo(this.orderData)
    },
    onSubmit(){
      this.orderData={}
      this.onBack()
    },
    //step2提交失败
    onSubmitError(){
      this.deleteInfo()
    },
    async deleteInfo(val) {
      // this.$message.loading({ content: '提交中'， })
      let res = await deleteInfo(this.orderData)
      console.log(res)
      if (res && res.code && res.code === 'C1' && res.data) {
        this.orderData={}
        console.log("删除成功");
        this.onBack()
      }
    },
    
  },
}
</script>

<style>
.viewTitle {
  line-height: 30px;
  font-size: 16px;
  font-weight: bolder;
  color: #555;
  border-bottom: 1px solid #ccc;
  margin: 10px 0;
}
.upAndDown {
  text-align: center;
}
.card {
  width: 100%;
  padding: 0 7px;
}
.dis {
  height: 15px;
  background-color: #f0f2f5;
}
</style>